<template>
	<div style="width: 375px; position: relative;">
		<div class="hmctm-card">
			<div class="card-header">
				<div class="card-header-image">
					<img class="avatar" src="https://blkq-static.oss-cn-shenzhen.aliyuncs.com/xcx/bllogo.png" />
				</div>

				<div class="card-header-content">
					<div class="ctm_name">
						示例用户
					</div>
					<div class="ctm_code">
						BL00001
					</div>
				</div>

				<div class="card-header-select">
					新增/切换
				</div>
			</div>

			<div class="card-bottom">
				<div class="vip-card">
					VIP
				</div>
				<div class="vip-content">
					<div style="font-size: 14px;">
						黄金会员
					</div>
					<div style="font-size: 14px; margin-left: 10px;">
						优惠多多，福利多多
					</div>
				</div>
				<div class="vip-btn">
					查看权益
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'ActHmCtmSelect',
		props: {
			title: {
				type: String,
				default: "宏脉卡号选择"
			},
		}
	}
</script>
<style scoped>
	.hmctm-card {
		width: 360px;
		margin: 7.5px 7.5px;
		background-color: #FFF;
		border-radius: 7px;
		display: flex;
		flex-direction: column;
		border: 1px solid #eee;
	}

	.card-header {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 90px;
	}

	.card-header-image {
		margin-left: 18px;
	}

	.card-header-image .avatar {
		width: 60px;
		height: 60px;
		border-radius: 50%;
	}

	.card-header-select {
		margin-right: 15px;
		color: #999;
		font-size: 14px;
	}

	.card-header-content {
		display: flex;
		flex-direction: column;
		margin-left: 12px;
		flex: 1;
	}

	.ctm_name {
		color: #333;
		font-size: 16px;
	}

	.ctm_code {
		color: #666;
		font-size: 15px;
	}

	.card-bottom {
		color: #FDF0D4;
		background: linear-gradient(to right, #38302C, #504642, #685e58);
		border-radius: 0 0 7px 7px;
		display: flex;
		flex-direction: row;
		height: 45px;
		align-items: center;
	}

	.vip-card {
		background-color: #141415;
		font-weight: bold;
		font-style: italic;
		height: 20px;
		width: 36px;
		font-size: 12px;
		text-align: center;
		line-height: 20px;
		border-radius: 4px;
		margin-left: 17px;
		margin-right: 12px;
		border: 1px solid #F8E7C1;
	}

	.vip-btn {
		background-color: #F8E7C1;
		height: 28px;
		width: 65px;
		line-height: 28px;
		text-align: center;
		color: #666;
		font-size: 12px;
		border-radius: 14px;
		margin-right: 12px;
		box-shadow: 0 2px 6px rgba(198, 156, 83, 0.2);
	}

	.vip-content {
		flex: 1;
		display: flex;
		flex-direction: row;
	}
</style>
